<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>高德地图坐标转换成百度地图坐标</title>
    <link href="v3.19.1-dist/ol.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    <!--地图容器-->
	<div id="mapDiv" style="height: 550px;margin: 2%;"></div>
	
	<!-- 
		说明:
			高德地图使用的坐标系为:GCJ-02
			百度地图使用的坐标系为:BD-09
			GCJ-02  >  BD-09
	-->
	
	<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
	<script src="v3.19.1-dist/ol-debug.js" type="text/javascript"></script>
	<!-- 地理坐标系转换工具，支持WGS84/GCJ02/BD09等常用坐标系互转 -->
	<script src="js/gcoord.js" type="text/javascript"></script>
	<!-- 转换成baiduMercator 投影 -->
	<script src="js/gcoordBaidu.js" type="text/javascript"></script>
    <script type="text/javascript">
		$(document).ready(function (){
			// 下面坐标是在https://lbs.amap.com/api/javascript-api/example/map/click-to-get-lnglat/中获取的
			var bd09LngLat = gcoord.transform(
				[116.397453,39.909162],    // 经纬度坐标(天安门)
				gcoord.GCJ02,              // 当前坐标系
				gcoord.BD09                // 目标坐标系
			);
			
			// 初始化地图
			initMap(bd09LngLat);
		});
		
		
		/* 初始化地图 */
		function initMap (centerLngLat){
			var extent = [72.004, 0.8293, 137.8347, 55.8271];

			var projection = new ol.proj.Projection({
				code: 'baidu',
				extent: ol.extent.applyTransform(extent, projzh.ll2bmerc),
				units: 'm'
			});

			ol.proj.addProjection(projection);
			ol.proj.addCoordinateTransforms('EPSG:4326', projection, projzh.ll2bmerc, projzh.bmerc2ll);
			ol.proj.addCoordinateTransforms('EPSG:3857', projection, projzh.smerc2bmerc, projzh.bmerc2smerc);

			var bmercResolutions = new Array(19);
			for (var i = 0; i < 19; ++i) {
				bmercResolutions[i] = Math.pow(2, 18 - i);
			}
			
			var baidu = new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: 'baidu',
					tileUrlFunction: function(tileCoord) {
						var x = tileCoord[1];
						var y = tileCoord[2];
						var z = tileCoord[0];
						return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
					},
					tileGrid: new ol.tilegrid.TileGrid({
						resolutions: bmercResolutions,
						origin: [0, 0],
						extent: ol.extent.applyTransform(extent, projzh.ll2bmerc),
						tileSize: [256, 256]
					})
				})
			});
			//地图容器
			var map = new ol.Map({
				target: 'mapDiv',
				layers: [baidu],
				view: new ol.View({
					center: centerLngLat,
					zoom: 18,
					projection: "EPSG:4326"
				})
			});
			
			//创建一个点
			var point = new ol.Feature({
				geometry: new ol.geom.Point(centerLngLat)
			});
			//设置点1的样式信息
			point.setStyle(new ol.style.Style({
				//填充色
				fill: new ol.style.Fill({
					color: 'rgba(255, 255, 255, 0.2)'
				}),
				//边线颜色
				stroke: new ol.style.Stroke({
					color: '#ffcc33',
					width: 2
				}),
				//形状
				image: new ol.style.Circle({
					radius: 17,
					fill: new ol.style.Fill({
						color: '#ffcc33'
					})
				})
			}));

			//实例化一个矢量图层Vector作为绘制层
			var source = new ol.source.Vector({
				features: [point]
			});
			//创建一个图层
			var vector = new ol.layer.Vector({
				source: source
			});
			//将绘制层添加到地图容器中
			map.addLayer(vector);
		}
    </script>
</body>
</html>
